/* -- 字体大小 --  */
.fs-xxs { font-size: $font-size-xxs; }
.fs-xs { font-size: $font-size-xs; }
.fs-sm { font-size: $font-size-sm; }
.fs-base { font-size: $font-size-base; }
.fs-md { font-size: $font-size-md; }
.fs-lg { font-size: $font-size-lg; }
.fs-xl { font-size: $font-size-xl; }
.fs-xxl { font-size: $font-size-xxl; }
.fs-xxxl { font-size: $font-size-xxxl; }
/* -- 字体大小 end -- */

/* -- 文字 -- */
.white-space-nowrap { white-space: nowrap; }

.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

// 内容超出
.text-wrap {
	white-space: normal;
	word-break: break-all;
	word-wrap: break-word;
}

// 内容超出小数点
.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.text-price::before {
	content: '¥';
	font-size: 80%;
	margin-right: 10rpx;
}
/* -- 文字 end -- */

/** -- margin , padding 辅助类 -- */
$sizeNumber: 30;
@function getLayoutSize($i) { @return $i + px; }

.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 {	margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

@for $i from 0 through $sizeNumber {
	.radius-#{$i} { border-radius: getLayoutSize($i); }

	.margin-#{$i} { margin: getLayoutSize($i); }
	.mt-#{$i} { margin-top: getLayoutSize($i); }
	.mb-#{$i} { margin-bottom: getLayoutSize($i); }
	.ml-#{$i} { margin-left: getLayoutSize($i); }
	.mr-#{$i} { margin-right: getLayoutSize($i); }

	.padding-#{$i} { padding: getLayoutSize($i); }
	.pt-#{$i} { padding-top: getLayoutSize($i); }
	.pb-#{$i} { padding-bottom: getLayoutSize($i); }
	.pl-#{$i} { padding-left: getLayoutSize($i); }
	.pr-#{$i} { padding-right: getLayoutSize($i); }

	// 水平 x轴
	.px-#{$i} { padding-left: getLayoutSize($i); padding-right: getLayoutSize($i); }
	.mx-#{$i} { margin-left: getLayoutSize($i); margin-right: getLayoutSize($i); }

	// 垂直 轴
	.py-#{$i} { padding-top: getLayoutSize($i); padding-bottom: getLayoutSize($i); }
	.my-#{$i} { margin-top: getLayoutSize($i); margin-bottom: getLayoutSize($i); }
}
/** -- margin , padding 辅助类 end -- */


/** -- width -- */
$widthNumber: 20;
@function getWidthSize($i, $unit: px) {
	@return ($i * 5) + $unit;
}
@for $i from 0 through $widthNumber {
	.width-#{$i * 5} {
		width: percentage($i / 20);
	}
	.height-#{$i * 5} {
		height: percentage($i / 20);
	}

	.width-#{$i * 5}px {
		width: getWidthSize($i, px);
	}
	.height-#{$i * 5}px {
		height: getWidthSize($i, px);
	}
}
/** -- width end -- */

/** -- flex -- */
.flex-1 { flex: 1; }
.is-flex-col { flex-direction: column; }
.is-flex,
.is-flex-col {
	display: flex;
	&.flex-wrap { flex-wrap: wrap; }
	&.flex-nowrap { flex-wrap: nowrap; }

  // 水平垂直居中
	&.flex-center { justify-content: center; align-items: center; } 

	&.justify-start { justify-content: flex-start; } 
	&.justify-end { justify-content: flex-end; } 
	&.justify-center { justify-content: center; } 
	&.justify-between { justify-content: space-between; } 
	&.justify-around { justify-content: space-around; }

	&.items-start { align-items: flex-start; }
	&.items-end { align-items: flex-end; } 
	&.items-center { align-items: center; }
	&.items-stretch { align-items: stretch; } // 如果项目未设置高度或设为 auto，将占满整个容器的高度
	&.items-baseline { align-items: baseline; } // 项目的第一行文字的基线对齐

	&.content-start { align-content: flex-start; } // 与交叉轴的起点对齐
	&.content-end { align-content: flex-end; } // 与交叉轴的终点对齐
	&.content-center { align-content: center; } // 与交叉轴的中点对齐
	&.content-between { align-content: space-between; } // 与交叉轴两端对齐，轴线之间的间隔平均分布
	&.content-around { align-content: space-around; } // 每根轴线两侧的间隔都相等(间隔大一倍)
}
/** -- flex end -- */

/** -- table -- */
.is-table {
	display: table;
	&.table-row { display: table-row; }
	&.table-cell { display: table-cell; }
}
/** -- table end -- */

/** -- grid 网格布局 -- */
.is-grid {
	display: grid;
	&.center { place-items: center; }
}
/** -- grid 网格布局 end -- */

/** -- position -- */
.is-relative { position: relative; }
.is-absolute { position: absolute; }
.is-fixed { position: fixed; }
.is-sticky { position: sticky; z-index: 2; }
.is-none { display: none !important; }
/** -- position end -- */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }


/* -- 动画 -- */

/* -- 点击可左右晃动  -- */
.hover-shake { animation: shake 0.5s 1; }
@keyframes shake {
	0%,100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
	90% { transform: translateX(-1px); }
}
/* -- 点击可左右晃动  end -- */

/* -- 点击上下晃动 -- */
.hover-jump { animation: jump 0.5s 1; }
@keyframes jump {
	0%, 100% { transform: translateY(0); }
	20% { transform: translateY(-5px); }
	40% { transform: translateY(4px); }
	60% { transform: translateY(-3px); }
	80% { transform: translateY(2px); }
	90% { transform: translateY(-1px); }
}
/* -- 点击上下晃动 end -- */

/* fixed元素 - 点击上下晃动 */
.hover-fixed-jump { animation: fixedJump 0.5s 1; }
@keyframes fixedJump {
	0%,100% { transform: translate(-50%, 0); }
	20% { transform: translate(-50%, -5px); }
	40% { transform: translate(-50%, 4px); }
	60% { transform: translate(-50%, -3px); }
	80% { transform: translate(-50%, 2px); }
	90% { transform: translate(-50%, -1px); }
}
/* fixed 元素 点击上下晃动 end */

/* 点击缩小放大 */
.hover-enlarge { animation: enlarge 0.5s 1; }
@keyframes enlarge {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(0.8); }
}
/* 点击上下晃动 end */

/* -- 动画 end -- */

/* --- 颜色类 --- */
.bg-gradual-red { @include bg-gradual-red; }
.bg-gradual-orange { @include bg-gradual-orange; }
.bg-gradual-green { @include bg-gradual-green; }
.bg-gradual-purple { @include bg-gradual-purple; }
.bg-gradual-pink { @include bg-gradual-pink; }
.bg-gradual-blue { @include bg-gradual-blue; }
.bg-red { @include bg-red; }
.bg-orange { @include bg-orange; }
.bg-yellow { @include bg-yellow; }
.bg-olive { @include bg-olive; }
.bg-green { @include bg-green; }
.bg-cyan { @include bg-cyan; }
.bg-blue { @include bg-blue; }
.bg-purple { @include bg-purple; }
.bg-mauve { @include bg-mauve; }
.bg-pink { @include bg-pink; }
.bg-brown { @include bg-brown; }
.bg-grey { @include bg-grey; }
.bg-gray { @include bg-gray; }
.bg-black { @include bg-black; }
.bg-white { @include bg-white; }
/* --- 颜色类 end --- */

// 安全距离
.safe-bottom-area {
	@include safe-bottom-area(padding-bottom);
}

// 安全距离高度
.safe-bottom-area-height {
	@include safe-bottom-area(height);
}


/* 右箭头 */
.arrow-right::after {
	content: ' ';
	height: 10px;
	width: 10px;
	border-width: 2px 2px 0 0;
	border-color: #999;
	border-style: solid;
	transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
}

/* 右下角确认选中效果 */
.ribbon-bottom {
	position: absolute;
	transform: rotate(-45deg);
	background: red;
	text-align: left;
	line-height: 30px;
	width: 30px;
	height: 30px;
	bottom: -15px;
	right: -15px;

	.icon-selected {
		position: absolute;
		top: -9px;
		left: 10px;
		transform: rotate(45deg);
		font-size: 8px;
		color: #fff;
	}
}
